<template>
  <div>
    <el-dialog
		v-model="dialog.visible"
		:title="dialog.title"
		destroy-on-close
		width="860px"
		class="editor-dialog-c"
		draggable
		:close-on-click-modal="false"
    >
      <el-table :data="tableData" style="width: 100%" border>
        <el-table-column prop="type" label="功能">
          <template #default="scope">
				<el-tag v-if="scope.row.type == 'attribute'" effect="dark">属性</el-tag>
				<el-tag v-if="scope.row.type == 'method'" type="warning" effect="dark">方法</el-tag> 
				<el-tag v-if="scope.row.type == 'event'" type="danger" effect="dark">事件</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="identifier" label="标识" />
		<el-table-column prop="code" label="业务码" width="100"/>
        <el-table-column fixed="right" align="left" label="操作" width="120">
          <template #header>
            <el-button
              type="primary"
              plain
              link
              :icon="Plus"
              @click.stop="addAbility"
              >定义功能</el-button
            >
          </template>
          <template #default="scope">
              <el-button
                type="primary"
                link
                size="small"
                @click="editAbility(scope.row)"
				:icon="Edit"
              />
			  
				<el-button
					type="primary"
					link
					size="small"
					@click="copyAbility(scope.row)"
					:icon="CopyDocument"
				/>
					
              <el-button
                type="primary"
                link
                size="small"
                @click="handleDeleteFun(scope.row)"
				:icon="Delete"
                />
							
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
	<AbilityPane v-if="abilityPane.visible" :visible="abilityPane.visible"  :title="abilityPane.title" :data="abilityPane.data" @closed="closeAbility"></AbilityPane>
  </div>
</template>

<script lang="ts" setup>
	import { ComponentLibraryService } from '@/api/visual/componentLibraryApi'
	import { Plus,CopyDocument,Delete,Edit } from "@element-plus/icons-vue";
	import AbilityPane from "./widgets/AbilityPane.vue";
	
	const abilityPane=ref<any>({
		visible:false,
		title:"",
		data:{}
	});
	
	const loading = ref(false);
	const dialog = ref({
	  visible: false,
	  title: "",
	});
	const tableData = ref([]);
	const componentId = ref<string>("");

	const load = async() => {
	   loading.value = true;
	 	const data =await ComponentLibraryService.getComponentDataModelList(componentId.value);
		try{
			tableData.value = data;
		}catch(e:any){
			console.error(e)
		}finally{
			loading.value = false;
		}
	};

	const componentRow = ref();
	const openDialog = (row: object) => {
	  dialog.value.visible = true;
	  dialog.value.title = "功能列表";
	  componentRow.value = row;
	  componentId.value = componentRow.value.id;
	  load();
	};

	const emits = defineEmits(["closeDialog"]);
	const closeDialog = () => {
	  dialog.value.visible = false;
	  dialog.value.title = "";
	  emits("closeDialog", componentRow.value);
	  componentRow.value = null;
	};
	
	const handleDeleteFun = (row: any) => {
	  ElMessageBox.confirm("确认删除[" + row.name + "]吗?", "警告", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
	  })
		.then(() => {
		  loading.value = true;
		  ComponentLibraryService.deleteComponentDataModel(row.id)
			.then((res:any) => {
			  console.log(res);
			  ElMessage.success("删除成功");
			  load();
			})
			.finally(() => {
			  loading.value = false;
			});
		})
		.catch(() => ElMessage.info("已取消删除"));
	};
	

	const addAbility=()=>{
		abilityPane.value.visible=true;
		abilityPane.value.title="新增功能";
		abilityPane.value.data={};
		abilityPane.value.data.componentId=componentRow.value.id;
	}
	
	const editAbility=(row:any)=>{
		abilityPane.value.visible=true;
		abilityPane.value.title="编辑功能";
		abilityPane.value.data=row;
	}
	
	const closeAbility=()=>{
		abilityPane.value.visible=false;
		abilityPane.value.title="";
		abilityPane.value.data=undefined;
		load();
	}
	
	const copyAbility=(row:any)=>{
		ElMessageBox.confirm("确认复制[" + row.name + "]吗?", "警告", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning",
		})
		.then(() => {
			loading.value = true;
			ComponentLibraryService.copyComponentDataModel(row.id)
			.then((res:any) => {
			  ElMessage.success("成功");
			  load();
			})
			.finally(() => {
			  loading.value = false;
			});
		})
		.catch(() => ElMessage.info("已取消"));
	}
	defineExpose({
	  openDialog,
	  closeDialog,
	});
	onMounted(() => {});
</script>

<style scoped>
</style>
